import {Button, Modal, Spin} from 'antd';
import React, {useEffect, useRef, useState} from 'react'


const MyFrameModal = ({onCancel, visible, src}) => {

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (visible)
      setLoading(true);
  },[visible]);

  const showFrame = () => {
    setLoading(!loading);
  };

  return (
    <>
      <Modal
        title="查看详情"
        width={'90%'}
        visible={visible}
        onCancel={onCancel}
        footer={<Button type="primary" onClick={onCancel}>关闭</Button>}
      >
        <div style={{width: '100%', height: '100%'}}>
          <Spin tip="加载中..." spinning={loading} size='large' delay={300}>
            <iframe onLoad={showFrame} frameBorder={0} height={700} width={'100%'} src={src} />
          </Spin>
        </div>
      </Modal>
    </>
  );

};

export default MyFrameModal
